<template>
  <!-- <view class="chat-container"> -->
  <view class="chat-container">
    <scroll-view
      class="chat-content"
      scroll-y="true"
      :scroll-top="chatStore.scrollTop"
      @scrolltoupper="chatStore.loadMoreMessages"
      :scroll-with-animation="true"
      ref="chatScroll"
    >
      <!-- 欢迎信息 -->
      <view class="welcome-message" v-if="messages.length === 0">
        <view class="chat-header">
          <image
            class="chat-header-bg"
            src="https://img.js.design/assets/img/68b8307903df0d2c63821bae.png#8ac3c61f3f9a8b590cf691ea87dbd034"
            mode="aspectFill"
          ></image>
          <view style="position:absolute;right:12%;top:10%">
          <view style="font-size: 17px;">你好，我是潍小智~</view>
          <view style="font-size: 20px;">你的校园生活搭子</view>
          </view>
          <view class="chat-header-inner"></view>
        </view>
      </view>
      <!-- 消息列表 -->
      <view class="messages">
        <block v-for="(message, index) in messages" :key="index">
          <!-- 用户消息 -->
          <view class="message-item user-message" v-if="message.role === 'user'">
            <view class="message-content">{{ message.content }}</view>
          </view>
          <!-- AI消息 -->
          <view class="message-item ai-message" v-else>
            <view class="message-content">
              <text>{{ message.content }}</text>
              <text
                class="typing-dots"
                v-if="chatStore.isStreaming && index === messages.length - 1"
                >...</text
              >
            </view>
          </view>
        </block>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <input
        class="input-box"
        type="text"
        v-model="chatStore.inputValue"
        :placeholder="chatStore.isStreaming ? '正在回复中......' : '请输入您的问题...'"
        :disabled="chatStore.isStreaming"
        @confirm="chatStore.handleSend"
        confirm-type="send"
      />
      <button
        class="send-btn"
        @tap="chatStore.handleSend"
        :disabled="chatStore.isStreaming || !chatStore.inputValue.trim()"
      >
        发送
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { useChatStore } from "@/store/modules/chat/chat";
import { useHistoryStore } from "@/store/modules/chat/history";

const chatStore = useChatStore();
const historyStore = useHistoryStore();
const messages = ref([]);
// 获取路由参数
const chatId = ref("");

onMounted(() => {
  console.log("对话界面挂载成功");
  //加载消息
  messages.value = chatStore.messages;
  //获取路由参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  chatId.value = currentPage.options?.chatId || "";
  if (chatId.value !== "") {
    historyStore.currentChatId = chatId.value;
    //加载历史对话
    console.log("接收到的chatId:", chatId.value);
    const historyData = historyStore.getChatHistory(chatId.value);
    console.log("historyData:", historyData);
    if (historyData && historyData.length > 0) {
      // 将历史数据转换为消息格式，user和assistant消息穿插排列
      messages.value = [];
      historyData.forEach((item) => {
        messages.value.push({
          role: "user",
          content: item.ask,
          timestamp: item.time,
        });
        messages.value.push({
          role: "assistant",
          content: item.request,
          timestamp: item.time,
        });
      });
      // 更新chatStore中的消息
      chatStore.messages = messages.value;
    }
  }
});
</script>

<style>


.chat-header {
  width: 90%;
  /* 设置元素的高度为 176px */
  height: 176px;
  /* top: 50px; */
  /* 设置元素的透明度为 1，即完全不透明 */
  opacity: 1;
  /* 设置元素的圆角半径为 15.14px */
  border-radius: 15.14px;
  /* 设置元素的背景为从 135 度方向渐变，起始颜色为 rgba(237, 230, 255, 1)，结束颜色为 rgba(222, 238, 255, 1) */
  background: linear-gradient(
    135deg,
    rgba(237, 230, 255, 1) 0%,
    rgba(222, 238, 255, 1) 100%
  );
  /* 设置元素的边框为 0.5px 宽的实线，颜色为 rgba(255, 255, 255, 1) */
  border: 0.5px solid rgba(255, 255, 255, 1);
  margin: 0 auto;
  position: absolute;
  top: 9%;
  left: 5%;
}

.chat-header-bg {
  /* // 设置元素的宽度为 204px */
  width: 204px;
  /* // 设置元素的高度为 272px */
  height: 272px;
  /* // 设置元素的透明度为 1，即完全不透明 */
  opacity: 1;
  /* // 设置元素的定位方式为绝对定位 */
  position: absolute;
  /*   // 设置元素距离父元素顶部的偏移量为 50% */
  top: 20%;
  /*  使用 transform 使元素在水平和垂直方向上都向上偏移自身宽高的一半，实现完美居中 */
  transform: translate(-90%, -50%);

}

.chat-header-inner {
  width: 100%;
  height: 84px;
  opacity: 1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset -4px -4px 2px rgba(255, 255, 255, 0.25),
    inset 0px 0.9px 1px rgba(255, 255, 255, 0.87),
    inset 0px 0px 2px rgba(255, 255, 255, 0.7),
    inset 0px 0px 16px rgba(255, 255, 255, 0.2),
    inset 0px 16px 32px rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(56px);
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* background: linear-gradient(180deg, #f6f9fc 0%, #e8f4ff 100%); */
}

.chat-content {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 180rpx;
  overflow-y: auto;
  box-sizing: border-box;
}

.welcome-message {
  display: flex;
  justify-content: center; /* 新增：水平居中 */
 
  text-align: center;
  padding: 80rpx 0;
  animation: fadeIn 0.5s ease;
  height: 100%;
  flex-direction: column;
}

.logo {
  height: 250rpx;
  width: 300rpx;
  margin-bottom: 30rpx;
  border-radius: 50%;
  box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.1);
}

.title {
  background: linear-gradient(to right, #2193b0, #3498db, #6dd5ed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: bold;
  animation: gradient 3s ease infinite;
  background-size: 200% auto;
  font-size: 30rpx;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.messages {
  padding-bottom: 30rpx;
  width: 100%;
  box-sizing: border-box;
}

.message-item {
  margin: 30rpx 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.message-content {
  max-width: 75%;
  padding: 24rpx;
  border-radius: 24rpx;
  font-size: 30rpx;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-message {
  align-items: flex-end;
}

.user-message .message-content {
  background: linear-gradient(135deg, #007aff 0%, #0062cc 100%);
  color: #fff;
  border-bottom-right-radius: 4rpx;
}

.ai-message {
  align-items: flex-start;
}

.ai-message .message-content {
  background: #fff;
  color: #333;
  border-bottom-left-radius: 4rpx;
  border: 1rpx solid #f0f0f0;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.typing-dots {
  display: inline-block;
  animation: typing 1s infinite;
  margin-left: 4px;
}

.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.input-box {
  flex: 1;
  height: 90rpx;
  padding: 0 30rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 15rpx;
  margin-right: 30rpx;
  background-color: #fff;
  font-size: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.input-box:focus {
  border-color: #007aff;
}

.send-btn {
  width: 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #007aff 0%, #0062cc 100%);
  color: #fff;
  border-radius: 15%;
  font-size: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
  transition: all 0.3s ease;
}

.send-btn[disabled] {
  background: #ccc;
  box-shadow: none;
}

.send-icon {
  width: 40rpx;
  height: 40rpx;
}

.top-bar {
  top: 0;
  left: 0;
  right: 0;
  height: 95rpx;
  width: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

@keyframes typing {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
